<template>
  <!-- 首页 -->
  <div class="home">
    <div class="bgcBox"></div>
    <div class="bgc">
      <!-- 信息 start-->
      <div class="infoBox">
        <div class="info">
          <div class="info-top">
            <div class="info-left">
              <div class="info-left-left">
                <van-image
                  round
                  width="56px"
                  height="56px"
                  :src="avatar"
                />
              </div>
              <div class="info-left-right">
                <p>{{ name }}</p>
                <div class="department van-ellipsis">部门: {{ department }}</div>
              </div>
            </div>
            <div class="info-right">
              <van-image
                width="23px"
                height="23px"
                :src="require('@/assets/icon/question.png')"
                @click="handleHelp"
              />
              <van-image
                width="20px"
                height="20px"
                class="ml-16"
                :src="require('@/assets/icon/scan.png')"
                @click="handleScan"
              />
            </div>
          </div>
          <div class="info-bottom">
            <div class="item" @click="goMyAsset">
              <p class="num">{{ consumingList.asset }}</p>
              <p>资产</p>
            </div>
            <div><div class="line">|</div></div>
            <div class="item" @click="goConsumables">
              <p class="num">{{ consumingList.consumable }}</p>
              <p>耗材</p>
            </div>
            <div><div class="line">|</div></div>
            <div class="item">
              <p class="num num1">{{ consumingList.record }}</p>
              <p>记录</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 信息 end-->

      <!-- 固定资产 start -->
      <Grid :data="{
        title: asset.title,
        grid: asset.grid.filter(item => menuNames.includes(item.text))
      }"/>
      <!-- 固定资产 end -->

      <!-- 办公耗材 start -->
      <Grid :data="{
        title: consumable.title,
        grid: consumable.grid.filter(item => menuNames.includes(item.text))
      }"/>
      <!-- 办公耗材 end -->

      <!-- 报表 start -->
      <Grid :data="report"/>
      <!-- 报表 end -->

      <!-- 我领用的资产 start -->
      <!-- <div class="tip">
        <div><van-icon name="like-o" class="mr-5" />我领用的资产</div>
        <div class="b-title">企业资产我使用我爱护</div>
      </div> -->
      <!-- 我领用的资产 end -->

      <!-- 资产 组件 -->
      <!-- <Asset
        @go-detail="handleGoAssetDetail"
        @go-operate="handleOperate"
        :assetList="assetList"
        :islossBtnShow="true"
      /> -->

    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { COMMON_TYPES, OPERATE_TYPES, EDIT_TYPES } from '@/constant';
// import Asset from '@/components/Asset';
import Grid from '@/components/Grid';
import dd from 'dingtalk-jsapi';

export default {
  name: 'Home',
  components: {
    // Asset,
    Grid
  },
  computed: {
    ...mapGetters(['name', 'avatar', 'department', 'dept_id', 'menus']),
    menuNames () {
      return this.menus.map(m => m.menu_name);
    }
  },
  data () {
    return {
      assetList: [], // 资产列表
      consumingList: {}, // 我的领用统计
      // 固定资产
      asset: {
        title: '固定资产',
        grid: [
          {
            text: '我的资产',
            icon: require('@/assets/icon/a.png'),
            to: {
              path: '/my-asset',
              query: {
                title: '我的资产',
                type: COMMON_TYPES.MY
              }
            }
          },
          {
            text: '部门资产',
            icon: require('@/assets/icon/b.png'),
            to: {
              path: '/my-asset',
              query: {
                title: '部门资产',
                type: COMMON_TYPES.DEPARTMENT
              }
            }
          },
          {
            text: '资产领用',
            icon: require('@/assets/icon/c.png'),
            to: {
              path: '/asset-receive',
              query: {
                title: '资产领用',
                type: COMMON_TYPES.ASSET
              }
            }
          },
          {
            text: '盘点任务',
            icon: require('@/assets/icon/d.png'),
            to: {
              path: '/inventory-task',
              query: {}
            }
          },
          {
            text: '维修任务',
            icon: require('@/assets/icon/e.png'),
            to: {
              path: '/repair-task',
              query: {}
            }
          },
          {
            text: '资产管理',
            icon: require('@/assets/icon/f.png'),
            to: {
              path: '/empty',
              query: {}
            }
          }
        ]
      },
      // 办公耗材
      consumable: {
        title: '办公耗材',
        grid: [
          {
            text: '我的耗材',
            icon: require('@/assets/icon/g.png'),
            to: {
              path: '/my-consumable',
              query: {
                title: '我领用的耗材',
                type: COMMON_TYPES.MY
              }
            }
          },
          {
            text: '部门耗材',
            icon: require('@/assets/icon/h.png'),
            to: {
              path: '/my-consumable',
              query: {
                title: '部门领用的耗材',
                type: COMMON_TYPES.DEPARTMENT
              }
            }
          },
          {
            text: '耗材领用',
            icon: require('@/assets/icon/i.png'),
            to: {
              path: '/asset-receive',
              query: {
                title: '耗材领用',
                type: COMMON_TYPES.CONSUMABLE
              }
            }
          },
          {
            text: '耗材管理',
            icon: require('@/assets/icon/j.png'),
            to: {
              path: '/consumable-empty',
              query: {}
            }
          },
          {
            text: '库存预警',
            icon: require('@/assets/icon/k.png'),
            to: {
              path: '/stock',
              query: {}
            }
          }
        ]
      },
      // 报表
      report: {
        title: '报表',
        grid: [
          {
            text: '我的报表',
            icon: require('@/assets/icon/l.png'),
            to: {
              path: '/empty/my-empty',
              query: {}
            }
          },
          {
            text: '部门报表',
            icon: require('@/assets/icon/m.png'),
            to: {
              path: '/empty/dept-empty',
              query: {}
            }
          },
          {
            text: '公司报表',
            icon: require('@/assets/icon/n.png'),
            to: {
              path: '/empty/company-empty',
              query: {}
            }
          }
        ]
      }
    };
  },
  methods: {
    // 操作
    handleOperate (operate, id, re_id) {
      let query = {
        f_id: id,
        id: re_id,
        operate,
        edit: EDIT_TYPES.CREATE,
        type: COMMON_TYPES.MY,
        c_from: '首页'
      };
      switch (operate) {
        case OPERATE_TYPES.REPAIR:
          query.title = '报修';
          this.$router.push({
            name: 'repairs-form',
            query
          });
          break;

        case OPERATE_TYPES.TRANSFER:
          query.title = '转移';
          this.$router.push({
            name: 'transfer-form',
            query
          });
          break;

        case OPERATE_TYPES.RETURN:
          query.title = '退还';
          this.$router.push({
            name: 'return-form',
            query
          });
          break;

        case OPERATE_TYPES.LOSS:
          query.title = '报失';
          this.$router.push({
            name: 'loss-form',
            query
          });
          break;
      }
    },
    // 前往资产详情
    handleGoAssetDetail (id) {
      this.$router.push({
        name: 'asset-detail',
        query: {
          id
        }
      });
    },
    // 获取我领用的资产列表
    getAsset () {
      this.$api.postReceiceMyAsset().then(res => {
        if (res.code === 0) {
          this.assetList = res.result;
        }
      });
    },
    // 获取首页领用统计
    getMyConsuming () {
      let params = {
        dept_id: this.dept_id
      };
      this.$api.getMyConsuming(params).then(res => {
        if (res.code === 0) {
          this.consumingList = res.result;
        }
      });
    },
    // 扫码
    handleScan () {
      const _this = this;
      dd.biz.util.scan({
        type: 'qrCode', // type 为 all、qrCode、barCode，默认是all。
        onSuccess: function (data) {
          // dingc7f6426b01017dc0f5bf40eda33b7ba0-354
          let f_id = Number(data.text.split('-')[1]);
          if (f_id) {
            let params = {
              id: f_id
            };
            _this.$api.getAssetInfo(params).then(res => {
              if (res.code === 0) {
                _this.handleGoAssetDetail(f_id);
              }
            });
          } else {
            _this.$toast.fail('资产二维码有误！');
          }
        },
        onFail: function (err) {
          console.log(err);
        }
      });
    },
    // 帮助
    handleHelp () {
      this.$router.push('/helpTemp');
    },
    // 前往我的资产
    goMyAsset () {
      this.$router.push({
        path: '/my-asset',
        query: {
          title: '我的资产',
          type: COMMON_TYPES.MY
        }
      });
    },
    // 前往我的耗材
    goConsumables () {
      this.$router.push({
        path: '/my-consumable',
        query: {
          title: '我领用的耗材',
          type: COMMON_TYPES.MY
        }
      });
    }
  },
  created () {
    this.getMyConsuming(); // 获取首页领用统计
    this.getAsset();// 获取我领用的资产列表
  }
};
</script>

<style lang="scss" scoped>
.home {
  font-size: 14px;
  background-color: #f8f9fd;
  .bgcBox {
    width: 100%;
    height: 120px;
    background-color: #1890FE;
    position: relative;
    top: 0;
  }
  .bgc{
    width: 100%;
  }
  .infoBox{
    position: relative;
    top: -96px;
    width: 345px;
    background-color: #fff;
    margin: 0 auto 10px;
    border-radius: 5px !important;
    box-sizing: border-box;
    box-shadow: 0px 0px 9px 2px rgba(221, 221, 221, 0.31);
    // 信息
    .info {
      margin-top: 20px;
      .info-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 26px 24px 22px;
      }
      .info-left {
        display: flex;
        align-items: center;
        .info-left-right {
          font-size: 20px;
          color: #333;
          padding-left: 10px;
          .department {
            font-size: 14px;
            color: #A2A2A2;
            padding-top: 10px;
            width: 168px;
          }
        }
      }
      .info-right {
        display: flex;
        align-items: center;
      }
      .info-bottom {
        display: flex;
        align-items: center;
        .item {
          display: flex;
          align-items: center;
          flex-direction: column;
          color: #838383;
          padding-bottom: 20px;
          flex: 1;
          .num {
            font-size: 22px;
            color: #0A8EFF;
            padding-bottom: 6px;
          }
          .num1 {
            color: #333;
          }
        }
        .line {
          height: 32px;
          color: #F5F5F5
        }
      }
    }
  }
  // 导航
  .title {
    color: #101010;
    padding: 15px 0 14px;
    border-bottom: 1px solid #F5F5F5;
    margin: 0 20px 15px;
  }
  ::v-deep.van-grid-item__content {
    padding: 8px 20px 22px;
    border-radius: 5px !important;
  }
  ::v-deep.van-grid-item__icon+.van-grid-item__text {
    margin-top: 10px;
  }
  // 我领用的资产
  .tip {
    background-color: #f8f9fd;
    position: relative;
    top: -96px;
    text-align: center;
    color: #5A738A;
    padding: 8px 0 8px;
    .b-title {
      font-size: 12px;
      color:#B3C4D5;
      padding-top: 12px;
    }
    .mr-5 {
      margin-right: 5px;
      transform: translateY(1px);
    }
  }
  // 资产列表
  .asset-box {
    position: relative;
    top: -96px;
    padding: 0 15px;
    background-color: #f8f9fd;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    ::v-deep.asset {
      width: 168px !important;
    }
    // mini按钮
    ::v-deep.van-button--mini+.van-button--mini {
      // margin-left: 10px !important;
    }
    ::v-deep.van-button--mini {
      min-width: 32px !important;
    }
    ::v-deep.van-image {
      width: 142px !important;
      height: 142px !important;
    }
  }
}
</style>
